<template>
  <div class="village">
    <div class="village_top">
      <div class="village_top_text">村落</div>
      <el-switch
        v-model="switchValue"
        active-color="#409EFF"
        :disabled="isdisabled"
        inactive-color="#d1d1d1"
        @change="switchChange"
      >
      </el-switch>
    </div>
    <div class="village_middle">
      <div class="village_middle_button" v-if="cunluoData.length">
        <div
          class="village_middle_button_image"
          :class="boxBlockItem == 0 ? 'image_active' : ''"
        >
          <div
            class="village_middle_content"
            @click="box_blockClick(0)"
            :style="{
              background:
                boxBlockItem == 0
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="village_middle_content_top">镇(总计)</div>
            <div class="village_middle_content_bottom">
              {{ areaDatas1 ? areaDatas1 : "暂无数据" }}
              {{ areaDatas1 ? "个" : "" }}
            </div>
          </div>
        </div>

        <div
          class="village_middle_button_image"
          :class="boxBlockItem == 1 ? 'image_active' : ''"
        >
          <div
            class="village_middle_content"
            @click="box_blockClick(1)"
            :style="{
              background:
                boxBlockItem == 1
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="village_middle_content_top">行政村(总计)</div>
            <div class="village_middle_content_bottom">
              {{ areaDatas2 ? areaDatas2 : "暂无数据" }}
              {{ areaDatas2 ? "个" : "" }}
            </div>
          </div>
        </div>

        <div
          class="village_middle_button_image"
          :class="boxBlockItem == 2 ? 'image_active' : ''"
        >
          <div
            class="village_middle_content"
            @click="box_blockClick(2)"
            :style="{
              background:
                boxBlockItem == 2
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="village_middle_content_top">自然村(总计)</div>
            <div class="village_middle_content_bottom">
              {{ areaDatas3 ? areaDatas3 : "暂无数据" }}
              {{ areaDatas3 ? "个" : "" }}
            </div>
          </div>
        </div>

        <div
          class="village_middle_button_image"
          :class="boxBlockItem == 3 ? 'image_active' : ''"
        >
          <div
            class="village_middle_content"
            @click="box_blockClick(3)"
            :style="{
              background:
                boxBlockItem == 3
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="village_middle_content_top">户数(总计)</div>
            <div class="village_middle_content_bottom">
              {{ areaDatas4 ? areaDatas4 : "暂无数据" }}
              {{ areaDatas4 ? "户" : "" }}
            </div>
          </div>
        </div>

        <div
          class="village_middle_button_image"
          :class="boxBlockItem == 4 ? 'image_active' : ''"
        >
          <div
            class="village_middle_content"
            @click="box_blockClick(4)"
            :style="{
              background:
                boxBlockItem == 4
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="village_middle_content_top">户籍人口(总计)</div>
            <div class="village_middle_content_bottom">
              {{ areaDatas5 ? areaDatas5 : "暂无数据" }}
              {{ areaDatas5 ? "人" : "" }}
            </div>
          </div>
        </div>
      </div>
      <div class="village_middle_button_else" v-else>
        <div class="village_middle_button_content_else">
          选址不涉及村落
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getXzRegion } from "../../../../../api/connect.js";
import tableNames from "../../left/tableNames.json";
export default {
  data() {
    return {
      boxBlockItem: 0,

      // 换算单位
      units: "",

      // 获取到镇的总数
      areaDatas1: 0,

      // 获取到行政村的总数
      areaDatas2: 0,

      // 获取到自然村的总数
      areaDatas3: 0,

      // 获取到户数的总数
      areaDatas4: 0,

      // 获取到户籍人口的总数
      areaDatas5: 0,

      //switch的值
      switchValue: false,
      isdisabled: false, //是否禁用

      // 村落图层的loading值
      cunluoLoading: false,
    };
  },
  computed: {
    ...mapState("Sjsx", ["cunluoData", "unit", "isRegion"]),
  },
  mounted() {
    // this.changeUnit();
    // this.changePie();
    this.getCunluoTotal();
  },
  methods: {
    ...mapActions({
      setCunluoLoading_act: "Sjsx/setCunluoLoading_act",
    }),
    // 判断选中了哪个盒子
    box_blockClick(val) {
      this.boxBlockItem = val;
    },

    // 计算村落各类型的总数
    getCunluoTotal() {
      console.log(this.cunluoData, "cunluoData的值");
      this.cunluoData.forEach((item) => {
        // console.log(item, "item的值");
        // 获取到镇的总数（即多少个镇）
        const townObj = {};
        const townArr = this.cunluoData.filter((item) =>
          townObj[item.town.value] ? "" : (townObj[item.town.value] = true)
        );
        // console.log(townArr,"镇去重后的数组");
        // console.log(townArr.length,"镇去重后的数组的总数");
        this.areaDatas1 = townArr.length;

        // 获取到行政村的总数（即多少个行政村）
        const xzObj = {};
        const xzArr = this.cunluoData.filter((item) =>
          xzObj[item.xzVillage.value]
            ? ""
            : (xzObj[item.xzVillage.value] = true)
        );
        // console.log(xzArr,"行政村去重后的数组");
        // console.log(xzArr.length,"行政村去重后的数组的总数");
        this.areaDatas2 = xzArr.length;

        // 获取到自然村的总数（即多少个自然村）
        const zrObj = {};
        const zrArr = this.cunluoData.filter((item) =>
          zrObj[item.zrVillage.value]
            ? ""
            : (zrObj[item.zrVillage.value] = true)
        );
        // console.log(zrArr,"自然村去重后的数组");
        // console.log(zrArr.length,"自然村去重后的数组的总数");
        this.areaDatas3 = zrArr.length;

        this.areaDatas4 += item.house.value; //获取到户数的总数
        this.areaDatas5 += item.people.value; // 获取到户籍人口的总数
      });
      // console.log(this.areaDatas4, "户数的总数");
      // console.log(this.areaDatas5, "户籍人口的总数");
    },

    // 点击后画点
    async getRegionData() {
      try {
        const temp = tableNames.find(
          (r) => r.layer_chinese_name === "选址涉及村落一栏表"
        );
        if (this.switchValue == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            let o = {
              id: "marker_" + temp.layer_english_name + "_" + index,
              // imagePath: HostConfig.Path + '/images/cunzhuang.png',
              imagePath: window.location.origin + "/images/cunzhuang.png", //在本地引用图片时，需加上window.location.origin
              imageSize: [75, 75],
              coordinate: itemJson.geometry.coordinates,
              text: itemJson.properties.zrc,
              //autoHeight: true,
              //showLine: true,
              fontSize: 30,
              fontColor: "#FFFFFF",
              textBackgroundColor: "#435A72",
              coordinateType: 0,
              showLine: true,
              range: [1, 35000], //标签的可见范围 [Min,Max]
              displayMode: 1,
              textRange: [1, 35000],
              lineOffset: [35, -10],
              lineSize: [1, 100],
              autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
              priority: 0, //避让优先级
              occlusionCull: false, //是否参与遮挡剔除
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            return o;
          });
          temp["polygondata"] = polygondata;
          console.log(polygondata, "村落polygondata");
          await window.__g.marker.add(polygondata);
          // await window.__g.marker.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.marker.updateBegin();
            let polygondataIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            //  window.__g.marker.updateEnd();
            window.__g.marker.delete(polygondataIds);

            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue = false; //请求失败后，将switch框设置为false
        this.cunluoLoading = false;
        this.setCunluoLoading_act(this.cunluoLoading); // 请求失败后，将loading窗关闭
      }
    },

    // switch的改变
    async switchChange(val) {
      console.log(val, "switch改变");
      this.isdisabled = true;
      // this.switchValue = val;
      if (val) {
        if (
          this.areaDatas1 ||
          this.areaDatas2 ||
          this.areaDatas3 ||
          this.areaDatas4 ||
          this.areaDatas5
        ) {
          this.cunluoLoading = true;
          this.setCunluoLoading_act(this.cunluoLoading);
          await this.getRegionData();
          this.cunluoLoading = false;
          this.setCunluoLoading_act(this.cunluoLoading);
        } else {
          this.$message.warning("选址无数据，暂无图层");
          setTimeout(() => {
            this.switchValue = false;
          }, 300);
        }
      } else {
        await this.getRegionData();
      }
      this.isdisabled = false;
    },
  },
  filters: {
    filterUnit(val) {
      if (val == "ha") {
        return " 公顷";
      } else if (val == "mu") {
        return " 亩";
      } else if (val == "m²") {
        return " 平方米";
      }
    },
  },
  // watch:{
  //   AreaData:{
  //     handler(newval){
  //       console.log(newval,"面积的值");

  //     }
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.village {
  margin-top: 25px;
  .village_top {
    display: flex;
    align-items: center;
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .village_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
      margin-right: 120px;
    }
  }
  .village_middle {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .village_middle_title {
    }
    .village_middle_button {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      width: 390px;
      flex-wrap: wrap;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .village_middle_button_image {
        width: 184px;
        height: 85px;
        margin-bottom: 15px;
        .village_middle_content {
          width: 184px;
          height: 85px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 4px;
          cursor: pointer;
          margin-bottom: 15px;
          .village_middle_content_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.85);
            padding-left: 20px;
          }
          .village_middle_content_bottom {
            padding-top: 8px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            color: #83fae5;
            padding-left: 20px;
          }
        }
      }
    }
    .village_middle_button_else {
      width: 430px;
      height: 100px;
      background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      .village_middle_button_content_else {
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}
</style>
